<template>
<!--  查询-->
  <div class="card" style="margin-bottom: 10px">
    <el-input style="width: 260px;margin-right: 10px" v-model="data.xingming" placeholder="请输入学生姓名查询" :prefix-icon="Search"/>
    <el-input style="width: 260px; margin-right: 10px" v-model="data.xuehao" placeholder="请输入学生学号查询" :prefix-icon="Search"/>
    <el-button type="primary" style="margin-left: 10px" @click="load">查询</el-button>
    <el-button type="info" color="#ccc" @click="reset">重置</el-button>
  </div>

<!--  新增-->
  <div class="card">
    <div style="margin-bottom: 5px">
      <el-button type="primary" @click="handleAdd">新增</el-button>
      <el-button type="primary" @click="voice">语音操作</el-button>
    </div>
  </div>

<!--  表单-->
  <div style="margin-bottom: 10px">
    <el-table :data="data.tableData" style="width: 100%">
      <el-table-column prop="id" label="ID" width="50" />
      <el-table-column prop="xuehao" label="学号" />
      <el-table-column prop="xingming" label="姓名"/>
      <el-table-column prop="xueyuan" label="学院"/>
      <el-table-column prop="zhuanye" label="专业"/>
      <el-table-column prop="xingbie" label="性别"/>
      <el-table-column prop="nianling" label="年龄" />
      <el-table-column prop="dianhua" label="电话"/>
      <el-table-column prop="zhuangtai" label="状态"/>
      <el-table-column>
        <template #default="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

<!--  分页条-->
  <div class="card">
    <el-pagination v-model:current-page="data.pageNum" v-model:page-size="data.pageSize"
                   background color="#ccc"
                   layout="prev, pager, next"
                   @current-change="handleCurrentChange"
                   :total="data.total"/>
  </div>

<!--编辑表单-->
  <el-dialog  width="35%"   v-model="data.formVisible" title="学生信息:">
    <el-form :model="data.form" label-width="80px" label-position="right" style="padding-right: 40px">
      <el-form-item label="学院">
        <el-input v-model="data.form.xueyuan" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="专业">
        <el-input v-model="data.form.zhuanye" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="data.form.xingbie">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="年龄">
      <el-input v-model="data.form.nianling" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="data.form.dianhua" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="data.form.zhuangtai">
          <el-radio label="已就业"></el-radio>
          <el-radio label="未就业"></el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="data.formVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </span>
    </template>
  </el-dialog>
<!--新增表单-->
  <el-dialog  width="35%"   v-model="data.formVisible1" title="学生信息:">
    <el-form :model="data.form" label-width="80px" label-position="right" style="padding-right: 40px">
      <el-form-item label="学号">
        <el-input v-model="data.form.xuehao" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="data.form.xingming" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="学院">
        <el-input v-model="data.form.xueyuan" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="专业">
        <el-input v-model="data.form.zhuanye" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="data.form.xingbie">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="data.form.nianling" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="data.form.dianhua" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="data.form.zhuangtai">
          <el-radio label="已就业"></el-radio>
          <el-radio label="未就业"></el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="data.formVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import {Search} from "@element-plus/icons-vue";
import {reactive} from "vue";
import request from "@/utils/Third/request";
import {ElMessage, ElMessageBox} from "element-plus";
import axios from 'axios';
const data =reactive({
  xingming:'',
  xuehao:'',
  tableData:[],
  total:0,
  pageSize:5, //每页的个数
  pageNum:1,//当前的页码
  totalPage:0,
  formVisible:false, //不展示
  formVisible1:false, //不展示
  form:{}
})

// 调用后台分页接口
const load = () => {
  request.get('http://localhost:8080/xuesheng/selectPage',{
    params:{
      pageNum:data.pageNum,
      pageSize:data.pageSize,
      xingming:data.xingming,
      xuehao:data.xuehao,
    }
  }).then(res => {
    data.tableData = res.data?.list || []
    data.total = res.data?.total || 0
  })
}
//获取总页数
const totalPage = () => {
  request.get("http://localhost:8080/xuesheng/totalPage")
      .then(res => {
        data.totalPage = res.data
      })
      .catch(err => {
        console.error(err);
      });
}
totalPage()
//调用方法获取后台数据
load()


const handleCurrentChange = (pageNum) =>{
  // 当翻页的时候重新加载数据即可
  load()
}

const reset = () =>{
  data.xingming= ''
  data.xuehao=''
  load()
}

// 新增方法
const handleAdd = () =>{
  data.form = {}
  data.formVisible1 = true
}
// 保存数据到后台
const save = () =>{
  request.request({
    url:data.form.id ? 'http://localhost:8080/xuesheng/update' :'http://localhost:8080/xuesheng/add',
    method:data.form.id ? 'PUT' : 'POST',
    data:data.form
  }).then(res =>{
    if (res.code == '200'){
      load() // 重新获取数据
      data.formVisible = false //关闭弹窗
      data.formVisible1 = false //关闭弹窗
      ElMessage.success('操作成功')
    } else {
      ElMessage.error(res.msg)
    }
  })
}

// 编辑功能
const handleEdit = (row) =>{
  data.form = JSON.parse(JSON.stringify(row))
  data.formVisible = true
}

// 删除功能
const del = (id) => {
  ElMessageBox.confirm('删除数据后无法恢复，您确认删除吗？', '删除确认', { type: 'warning' }).then(res => {
    request.delete('http://localhost:8080/xuesheng/delete/' + id).then(res => {
      if (res.code === '200') {
        load()    // 重新获取数据
        ElMessage.success("操作成功")
      } else {
        ElMessage.error(res.msg)
      }
    })
  }).catch(res => {})
}
//建立webshockt连接
const connWebScoket = () => {
  const ws = new WebSocket('ws://localhost:8080/websocket/1');
  //连接成功时
  ws.addEventListener('open',function(event){
    console.log('websocket connected.连接成功');
  });
  //接收到服务端消息时
  ws.addEventListener('message',function(event){
    var msg = event.data;
    console.log("接收到指令："+msg)
    var arr = msg.split(",")
    if (arr[0] === "1"){  //翻页功能
      //上一页pageNum-1
      if (arr[1] === "1"){
        if (data.pageNum > 1){
          data.pageNum--;
          load()
        }else{ alert("已经是第一页了！！") }
      }else if(arr[1] === "2"){
        //下一页pageNum+1
        if (data.totalPage>data.pageNum){
          data.pageNum++;
          load()
        }else{ alert("已经是最后一页了！！") }
      }
    }else if (arr[0] === "2"){  //指定页码跳转
      if (arr[1] <= data.totalPage){
        data.pageNum = parseInt(arr[1]);
        load()
      }else { alert("超出总页数了！！") }
    }else if(arr[0] === "3" && arr[1] === "1"){  //根据姓名查询
      data.xingming = arr[2];
      load();
    }else if(arr[0] === "3" && arr[1] === "2"){  //根据学号查询
      data.xuehao = arr[2];
      load();
    }else if (arr[0]==="5"){  //新增学生信息
      data.formVisible1 = true;
    } //else if (arr[0]==="6"){
        //   data.xuehao = arr[1];
        //   load();
        //   del();
        // } else if (arr[0]==="7"){
        //   data.xuehao = arr[1];
        //   data.form = JSON.parse(JSON.stringify(data.xuehao))
        //   data.formVisible = true
    // }
    else if(arr[0] === "00000"){ alert("没有该指令！！") }
  });

  //连接关闭时
  ws.addEventListener('close',function(event){
    console.log('websocket closed.');
  });
  //绑定到全局变量
  window.chatWs = ws;
}
connWebScoket()
//启动语音识别
const voice = () => {
  axios.get('http://localhost:8080/xuesheng/start_talk')
      .catch(error => {
        console.error(error);
      });
}

</script>
